<script type="text/javascript"> 
$(document).ready(function () {
    $('#form_capnhattietmuc').hide();
    $('#form_capnhattietmuc').jqxWindow({
        theme: theme,
        title: "Tiết mục",
        animationType:'fade',
        height: 455,
        maxWidth: 1200,
        width: 985,
        position:{ x: 200, y: 50 },
        resizable: true, 
        isModal: true, 
        modalOpacity: 0.3,
        closeButtonAction: 'hide',
        initContent: function () {
            $('#danhsachtietmuc_themtietmuc').jqxButton({ theme: theme, width: '75px', height: '25px' });
            $('#danhsachtietmuc_xoatietmuc').jqxButton({ theme: theme, width: '75px', height: '25px' });
            $("#tentietmuc").jqxInput({ theme: theme, height: 25, width: 230, placeHolder: "Tên tiết mục"});
            $('#themnghesi_vaotietmuc').jqxButton({ theme: theme, width: '120px', height: '40px' });
            $('#themcanhom_vaotietmuc').jqxButton({ theme: theme, width: '120px', height: '40px' });
            $('#xoanghesi_khoitietmuc').jqxButton({ theme: theme, width: '120px', height: '40px' });
            $('#suatentietmuc').jqxButton({ theme: theme, width: '75px', height: '25px' });
        }
    });
    //------------------------danh sách tiết mục của show nào đó----------------
    var danhsachtietmuc_dataSource = {
        datatype: "json",
        cache: false,
        datafields: [
            { name: 'ma_tiet_muc', type: 'string' },
            { name: 'ten_tiet_muc', type: 'string' }
        ],
        id: 'ma_tiet_muc',
        url: 'libs/DSTietMuc.php',
        addrow: function (rowid, rowdata, position, commit) {
            // synchronize with the server - send insert command
            var data = "action=insert&" + $.param(rowdata);
            $.ajax({
                //dataType: 'json',
                url: 'controllers/TietMuc_Controller.php',
                data: data,
                type: "POST",
                cache: false,
                success: function (data, status, xhr) {
                    // insert command is executed.
                    commit(true);
                    $('#buoibieudien_danhsachtietmuc').jqxGrid('updatebounddata');
                    console.log("add commited");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    commit(false);
                    console.log(jqXHR.responseText);
                }
            });
        },
        deleterow: function (matietmuc, commit) {
            // synchronize with the server - send delete command
            var data = "action=delete&" + $.param({ matietmuc: matietmuc });
            $.ajax({
                //dataType: 'json',
                url: 'controllers/TietMuc_Controller.php',
                cache: false,
                type: "POST",
                data: data,
                success: function (data, status, xhr) {
                    // delete command is executed.
                    commit(true);
                    $('#buoibieudien_danhsachtietmuc').jqxGrid('updatebounddata');
                    $('#tietmuc_danhsach_nghesi_thamgia').jqxGrid('updatebounddata');
                    $('#tietmuc_danhsach_nghesi_chuathamgia').jqxGrid('updatebounddata');
                    console.log("delete commited");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    commit(false);
                    console.log(jqXHR.responseText);
                }
            });
        },
        updaterow: function (rowid, rowdata, commit) {
               // synchronize with the server - send update command
               var data = "action=edit&" + $.param(rowdata);
               $.ajax({
                   //dataType: 'json',
                   url: 'controllers/TietMuc_Controller.php',
                   cache: false,
                   data: data,
                   type: "POST",
                   success: function (data, status, xhr) {
                       // update command is executed.
                        commit(true);
                        $('#buoibieudien_danhsachtietmuc').jqxGrid('updatebounddata');
                        console.log("update commited");
                   },
                   error: function (jqXHR, textStatus, errorThrown) {
                       console.log(textStatus + "  " + errorThrown + "   " + jqXHR.responseText);
                       commit(false);
                   }
               });
           }
    };
    var danhsachtietmuc_dataAdapter = new $.jqx.dataAdapter(danhsachtietmuc_dataSource, {
        formatData: function (data) {
            $.extend(data, {
                mabuoidien: $("#ma_buoibieudien").val()
            });
            return data;
        }
    });
    $("#buoibieudien_danhsachtietmuc").jqxGrid({
        theme: theme,
        width: 300,
        height: 350,
        source: danhsachtietmuc_dataAdapter,
        sortable: true,
        pageable: false,
        columns: [
            { text: 'Mã', datafield: 'ma_tiet_muc', width: 70, hidden: false },
            { text: 'Tên tiết mục', datafield: 'ten_tiet_muc', width: 215, hidden: false}
            ]
    });
    $('#buoibieudien_danhsachtietmuc').on('rowclick', function (event){
            var args = event.args;
	    var row = args.rowindex;
	    console.log("click at" + row);
	    var data = $('#buoibieudien_danhsachtietmuc').jqxGrid('getrowdata', row);
            $("#matietmuc").val(data["ma_tiet_muc"]);
            $("#tentietmuc").val(data["ten_tiet_muc"]);
            console.log($("#matietmuc").val());
            $('#tietmuc_danhsach_nghesi_thamgia').jqxGrid('updatebounddata');
            $('#tietmuc_danhsach_nghesi_chuathamgia').jqxGrid('updatebounddata');
	});
        
    //------------------------danh sách thành viên của tiêt mục----------------
    var danhsach_nghesi_thamgia_tietmuc_dataSource = {
        datatype: "json",
        cache: false,
        datafields: [
            { name: 'ma_nghe_si', type: 'string' },
            { name: 'nghe_danh', type: 'string' }
        ],
        id: 'ma_nghe_si',
        url: 'libs/DSNgheSi_ThamGia_TietMuc.php',
        addrow: function (rowid, rowdata, position, commit) {
            // synchronize with the server - send insert command
            var data = "action=insert&" + $.param(rowdata);
            console.log(data);
            $.ajax({
                //dataType: 'json',
                url: 'controllers/NgheSi_ThamGiaTietMuc_Controller.php',
                data: data,
                type: "POST",
                cache: false,
                success: function (data, status, xhr) {
                    // insert command is executed.
                    commit(true);
                    $('#tietmuc_danhsach_nghesi_thamgia').jqxGrid('updatebounddata');
                    $('#tietmuc_danhsach_nghesi_chuathamgia').jqxGrid('updatebounddata');
                    console.log("add commited");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    commit(false);
                    console.log(jqXHR.responseText);
                }
            });
        },
        deleterow: function (rowdata, commit) {
                // synchronize with the server - send delete command
                var data = "action=delete&" + $.param(rowdata);
                $.ajax({
                    //dataType: 'json',
                    url: 'controllers/NgheSi_ThamGiaTietMuc_Controller.php',
                    cache: false,
                    type: "POST",
                    data: data,
                    success: function (data, status, xhr) {
                        // delete command is executed.
                        commit(true);
                        $('#tietmuc_danhsach_nghesi_thamgia').jqxGrid('updatebounddata');
                        $('#tietmuc_danhsach_nghesi_chuathamgia').jqxGrid('updatebounddata');
                        console.log("delete commited");
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        commit(false);
                        console.log(jqXHR.responseText);
                    }
                });
            }
    };
    var danhsach_nghesi_thamgia_tietmuc_dataAdapter = new $.jqx.dataAdapter(danhsach_nghesi_thamgia_tietmuc_dataSource, {
        formatData: function (data) {
            $.extend(data, {
                matietmuc: $("#matietmuc").val()
            });
            return data;
        }
    });
    var nghedanh_renderer = function(row, columnfield, value){
        var data = $('#tietmuc_danhsach_nghesi_thamgia').jqxGrid('getrowdata', row);
        var id = data["ma_nghe_si"];
        var fileName= "resources/img/nghe_si/" + id + ".png";
        var res = '<img src="' + fileName + '" width="40px" height="40px" style="vertical-align: middle;" onerror="changeSrc(this);"/>  ' + 
                '<strong>' + value + '</strong>';      
        return res;
    };
    var nghedanh_renderer2 = function(row, columnfield, value){
        var data = $('#tietmuc_danhsach_nghesi_chuathamgia').jqxGrid('getrowdata', row);
        var id = data["ma_nghe_si"];
        var fileName= "resources/img/nghe_si/" + id + ".png";
        var res = '<img src="' + fileName + '" width="40px" height="40px" style="vertical-align: middle;" onerror="changeSrc(this);"/>  ' + 
                '<strong>' + value + '</strong>';      
        return res;
    };
    var tennhom_renderer = function(row, columnfield, value){
        var data = $('#tietmuc_danhsach_nghesi_chuathamgia').jqxGrid('getrowdata', row);
        var id = data["ma_nhom"];
        if(parseInt(id)){
            var fileName= "resources/img/nhom_nhac/" + id + ".png";
            var res = '<img src="' + fileName + '" width="40px" height="40px" style="vertical-align: middle;"/>  ' + 
                    '<strong>' + value + '</strong>';      
            return res;
        }return "";
    };
    $("#tietmuc_danhsach_nghesi_thamgia").jqxGrid({
        theme: theme,
        width: 215,
        height: 300,
        rowsheight: 40,
        source: danhsach_nghesi_thamgia_tietmuc_dataAdapter,
        sortable: true,
        columns: [
            { text: 'Mã', datafield: 'ma_nghe_si', width: 50, hidden: false },
            { text: 'Nghệ danh', datafield: 'nghe_danh', width: 150, hidden: false,cellsrenderer: nghedanh_renderer}
            ]
    });
    
    //------------------------danh sách thành viên của tiêt mục----------------
    var matietmuc=$('#matietmuc').val();
    var danhsach_nghesi_chuathamgia_tietmuc_dataSource = {
        datatype: "json",
        cache: false,
        datafields: [
            { name: 'ma_nghe_si', type: 'int' },
            { name: 'nghe_danh', type: 'string' },
            { name: 'ma_nhom', type: 'int' },
            { name: 'ten_nhom', type: 'string' }
        ],
        id: 'ma_nghe_si',
        url: 'libs/DSNgheSi_ChuaThamGia_TietMuc.php'
    };
    var danhsach_nghesi_chuathamgia_tietmuc_dataAdapter = new $.jqx.dataAdapter(danhsach_nghesi_chuathamgia_tietmuc_dataSource, {
        formatData: function (data) {
            $.extend(data, {
                matietmuc: $("#matietmuc").val()
            });
            return data;
        }
    });
    $("#tietmuc_danhsach_nghesi_chuathamgia").jqxGrid({
        theme: theme,
        width: 440,
        height: 300,
        source: danhsach_nghesi_chuathamgia_tietmuc_dataAdapter,
        sortable: true,
        pageable: true,
        rowsheight: 40,
        columns: [
            { text: 'Mã', datafield: 'ma_nghe_si', width: 50, hidden: false },
            { text: 'Nghệ danh', datafield: 'nghe_danh', width: 150, hidden: false, cellsrenderer: nghedanh_renderer2},
            { text: 'Mã nhóm', datafield: 'ma_nhom', width: 75, hidden: false },
            { text: 'Tên nhóm', datafield: 'ten_nhom', width: 150, hidden: false, cellsrenderer: tennhom_renderer}
            ]
    });
    //--------------------------------------------------------------------------------
    
    $('#form_capnhattietmuc').on('open', function (event) {
        $('#buoibieudien_danhsachtietmuc').jqxGrid('updatebounddata');
    }); 
    
    $("#form_capnhattietmuc").jqxWindow('close');
    
    $("#danhsachtietmuc_themtietmuc").bind("click", function(){
        var tentietmuc=$("#tentietmuc").val();
        if (tentietmuc == "") alert("Tên tiết mục không được bỏ trống");
        else{
            var datarow = generateRow();
            $("#buoibieudien_danhsachtietmuc").jqxGrid('addrow', null, datarow);
        }
    });
    
    $("#danhsachtietmuc_xoatietmuc").bind("click", function(){
        var selectedrowindex = $("#buoibieudien_danhsachtietmuc").jqxGrid('getselectedrowindex');
        if(selectedrowindex < 0){
            alert("Chưa có tiết mục nào được chọn");
        }else{
            var tentietmuc=getSelectedRowDataFromGrid("#buoibieudien_danhsachtietmuc", "ten_tiet_muc");
            var matietmuc=getSelectedRowDataFromGrid("#buoibieudien_danhsachtietmuc", "ma_tiet_muc");
            console.log(matietmuc);
            var confirmMessage = confirm("Bạn có chắc muốn xóa tiết mục: " + tentietmuc + "?");
            if (confirmMessage) $("#buoibieudien_danhsachtietmuc").jqxGrid('deleterow', matietmuc);
        }
    });
    
    $("#suatentietmuc").bind("click", function(){ 
        var selectedrowindex = $("#buoibieudien_danhsachtietmuc").jqxGrid('getselectedrowindex');
        if(selectedrowindex < 0){
            alert("Chưa có tiết mục nào được chọn");
        }else{
            var tentietmuc=$("#tentietmuc").val();
            if (tentietmuc == "") alert("Tên tiết mục không được bỏ trống");
            else{
                var row = {};
                row["ten_tiet_muc"] = tentietmuc;
                var matietmuc=getSelectedRowDataFromGrid("#buoibieudien_danhsachtietmuc", "ma_tiet_muc");
                row["ma_tiet_muc"] = matietmuc;

                $("#buoibieudien_danhsachtietmuc").jqxGrid('updaterow', matietmuc, row);
            }
        }
    });
    
    $("#themnghesi_vaotietmuc").bind("click", function(){
        var selectedrowindex = $("#tietmuc_danhsach_nghesi_chuathamgia").jqxGrid('getselectedrowindex');
        if(selectedrowindex < 0){
            alert("Chưa có nghệ sĩ nào được chọn");
        }else{
            var row = {};
            //lay ra index cua HANG duoc chon
            var matietmuc = getSelectedRowDataFromGrid("#buoibieudien_danhsachtietmuc", "ma_tiet_muc");
            row["ma_tiet_muc"] = matietmuc;

            var manghesi = getSelectedRowDataFromGrid("#tietmuc_danhsach_nghesi_chuathamgia", "ma_nghe_si");
            row["ma_nghe_si"] = manghesi;

            row["type"] = "themnghesi";

            console.log(row);
            $("#tietmuc_danhsach_nghesi_thamgia").jqxGrid('addrow', null, row);
        }
    });
    
    $("#themcanhom_vaotietmuc").bind("click", function(){
        var selectedrowindex = $("#tietmuc_danhsach_nghesi_chuathamgia").jqxGrid('getselectedrowindex');
        if(selectedrowindex < 0){
            alert("Chưa có nghệ sĩ nào được chọn");
        }else{
            var row = {};
            //lay ra index cua HANG duoc chon
            var matietmuc = getSelectedRowDataFromGrid("#buoibieudien_danhsachtietmuc", "ma_tiet_muc");
            var tentietmuc = getSelectedRowDataFromGrid("#buoibieudien_danhsachtietmuc", "ten_tiet_muc");
            row["ma_tiet_muc"] = matietmuc;

            var manhom = getSelectedRowDataFromGrid("#tietmuc_danhsach_nghesi_chuathamgia", "ma_nhom");
            var tennhom = getSelectedRowDataFromGrid("#tietmuc_danhsach_nghesi_chuathamgia", "ten_nhom");
            row["ma_nhom"] = manhom;

            row["type"] = "themnhom";

            var confirmMessage = confirm("Thêm toàn bộ nhóm nhạc " + tennhom + " vào tiết mục " + tentietmuc + "?");
            if (confirmMessage) $("#tietmuc_danhsach_nghesi_thamgia").jqxGrid('addrow', null, row);
        }
    });
    
    $("#xoanghesi_khoitietmuc").bind("click", function(){
        //lấy ra mã nghệ sĩ cần xóa khỏi tiết mục
        //getSelectedRowDataFromGrid
        var selectedrowindex = $("#tietmuc_danhsach_nghesi_thamgia").jqxGrid('getselectedrowindex');
        if(selectedrowindex < 0){
            alert("Chưa có nghệ sĩ nào được chọn");
        }else{
            var manghesi = getSelectedRowDataFromGrid("#tietmuc_danhsach_nghesi_thamgia", "ma_nghe_si");
            var nghedanh = getSelectedRowDataFromGrid("#tietmuc_danhsach_nghesi_thamgia", "nghe_danh");
            //var nghedanh = data["nghe_danh"];

            //lấy ra tiết mục đang được chọn của show
            var matietmuc = getSelectedRowDataFromGrid("#buoibieudien_danhsachtietmuc", "ma_tiet_muc");
            var tentietmuc = getSelectedRowDataFromGrid("#buoibieudien_danhsachtietmuc", "ten_tiet_muc");

            var row = {};
            row["ma_nghe_si"] = manghesi;
            row["ma_tiet_muc"] = matietmuc;

            var confirmMessage = confirm("Xóa nghệ sĩ " + nghedanh + " khỏi tiết mục " + tentietmuc + " ?");
            if (confirmMessage) $("#tietmuc_danhsach_nghesi_thamgia").jqxGrid('deleterow', row);
        }
    });
    
    var generateRow = function(){
        var row = {};
        
        var mabuoidien = getSelectedRowDataFromGrid("#buoibieudien_danhsach", "ma_buoi_dien")
        row["ma_buoi_dien"] = mabuoidien;
        
        var tentietmuc = $("#tentietmuc").val();
        row["ten_tiet_muc"] = tentietmuc;
        return row;
    };
    var getSelectedRowDataFromGrid = function(gridJQuerySelector, dataField){
        var selectedrowindex = $(gridJQuerySelector).jqxGrid('getselectedrowindex');
        var data = $(gridJQuerySelector).jqxGrid('getrowdata', selectedrowindex);
        var res = data[dataField];
        return res;
    };
});
</script>
<div id="form_capnhattietmuc"> 
    <div id="tietmuc_info">
        <input type="hidden" id="matietmuc" value=""/>
        <div style="float:left">
            Tiết mục: <input type="text" id="tentietmuc"/><br>
            <input type="button" id="danhsachtietmuc_themtietmuc" value="Thêm"/>
            <input type="button" id="danhsachtietmuc_xoatietmuc" value="Xóa" />
            <input type="button" id="suatentietmuc" value="Sửa" /><br>
            <div id="buoibieudien_danhsachtietmuc"></div>
        </div>
        <div id="dsnghesi_dathamgia" style="float: left">
            <center><strong><h3 style="color: red">Danh Sách Nghệ Sĩ<br />Tham Gia</h3></strong></center>
            <div id="tietmuc_danhsach_nghesi_thamgia" style="float: left"></div>
            <center>
                <input type="button" id="xoanghesi_khoitietmuc" value="Xóa khỏi&#10;tiết mục" style="margin-top: 5px" /><br/>   
            </center>
        </div>
        <div id="dsnghesi_chuathamgia" style="float: left">
            <center><strong><h3 style="color: red">Danh Sách Nghệ Sĩ<br />Chưa Tham Gia</h3></strong></center>
            <div id="tietmuc_danhsach_nghesi_chuathamgia"></div>
            <center>
                <input type="button" id="themnghesi_vaotietmuc" value="Thêm nghệ sĩ" style="margin-top: 5px" />
                <input type="button" id="themcanhom_vaotietmuc" value="Thêm nhóm" style="margin-top: 5px" />
            </center>
        </div>
    </div>
</div>